<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>XXX平台</title>
  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
  <header>
    <div class="c900 flex">
      <a href="./"><h1 style="color: #fdfdfd">XXX平台</h1></a>
      <span class="flex">
                <a><el-avatar src="https://img1.baidu.com/it/u=2068393135,2936134418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar></a>
                <a href="register.html">注册</a>
                <a href="login.html">登录</a>
            </span>
    </div>
  </header>
  <main class="c900">
    <fieldset>
      <legend>登录</legend>
      <form class="grid2" style="width: 300px; margin: auto"
            action="" method="post" enctype="application/x-www-form-urlencoded">
        <label for="">账号:</label><input type="text" name="username">
        <label for="">密码:</label><input type="password" name="password">
        <label for=""></label>
        <div style="text-align: right"><a href="">注册</a>
          <button>登录</button></div>
      </form>
    </fieldset>
    <fieldset>
      <legend>注册</legend>
      <form class="grid4" style="width: 900px; margin: auto"
            action="" method="post" enctype="application/x-www-form-urlencoded">
        <img :src="src"
             style="grid-area: 1/1/10/1; width: 200px;cursor: pointer"
             @click="$refs.fileinput.click()"
        ></img>
        <label for="">账号:</label><input type="text" v-model="person.name">
        <small>{{errors.name}}</small>

        <label for="">密码:</label><input type="password" v-model="person.pwd">
        <small>{{errors.pwd}}</small>

        <label for="">学生:</label><input type="checkbox" v-model="person.student" value="true">
        <small>{{errors.student}}</small>

        <label for="">邮箱:</label><input type="email" v-model="person.email">
        <small>{{errors.email}}</small>

        <label for="">电话:</label><input type="number" v-model="person.phone">
        <small>{{errors.phone}}</small>

        <label for="">年龄:</label><input type="number" v-model="person.age">
        <small>{{errors.age}}</small>

        <label for="">生日:</label><input type="date" v-model="person.birthday">
        <small>{{errors.birthday}}</small>
        <label for=""></label>
        <div style="text-align: right">
          <button @click.prevent="reg">注册</button></div>
      </form>
    </fieldset>
    <fieldset style="display: none">
      <legend>文件上传</legend>
      <form class="grid2" style="width: 300px; margin: auto"
            action="uploadfile" method="post" enctype="multipart/form-data">
        <label for="">类型:</label>
        <select name="type">
          <option value="image">图片</option>
          <option value="audio">音频</option>
          <option value="video">视频</option>
          <option value="all">不限</option>
        </select>
        <label for="">文件:</label>
        <input ref="fileinput" @change="upload" type="file" name="file">
        <label for="">图片:</label><img :src="src" width="200px">
        <label for=""></label>
        <div style="text-align: right">
          <button>表单上传</button>   <!--form表单  提交后  action="uploadfile" 文件上传的处理接口。-->
          <button @click.prevent="upload">AJAX上传</button>
        </div>
      </form>
    </fieldset>
  </main>
</div>
<script>
  var v = new Vue({
    el : "#app",
    data : {
      person:{
        name:"",
        pwd:"",
        age:0,
        student:false,
        email:"",
        phone:"",
        birthday: new Date()
      },
      errors:{
        name:"",
        pwd:"",
        age:"",
        student:"",
        email:"",
        phone:"",
        birthday: ""
      },
      src:"https://img1.baidu.com/it/u=445400343,2429165517&fm=253&fmt=auto&app=138&f=JPEG?w=236&h=236"
    },
    created() {},
    methods : {
      reg(){
        axios.post("reg",this.person).then(res=>{
          this.errors = {
            name:"",
            pwd:"",
            age:"",
            student:"",
            email:"",
            phone:"",
            birthday: ""
          };
          if(res.data.code == 1){
            this.$alert("注册成功!");
          } else {
            res.data.data.forEach(e=>{
              this.errors[e.field] = e.defaultMessage;
            });
          }

        });
      },
      upload(){
        /*用于存储表单数据，这里将用于存储要上传的文件。*/
        var fd = new FormData();
        /* 获取表单中类型为文件输入的元素，即 <input type='file'> 元素，赋值给变量 fl。*/
        var fl = document.querySelector("form input[type='file']");
        /*append("file", fl.files[0]) 方法用于向 FormData 对象中添加一个新的键值对，
        其中 "file" 是键名，表示上传文件的字段名，fl.files[0] 是值，表示用户选择的文件对象。
        fl.files[0] 表示该文件输入元素中用户选择的第一个文件对象。*/
        fd.append("file", fl.files[0]);

        axios.post("uploadfile",fd).then(res=>{
          if(res.data.code==1){
            this.src = res.data.data;
          } else {
            this.$alert("文件上传失败");
          }
        })
      }
    }
  })
</script>
</body>
</html>

<style>

  form small{
    color: red;
    min-width: 200px;
  }

  html,body,#app{
    height: 100%;
  }
  body{
    margin: 0px;
    padding: 0px;
    background-size: cover;
  }
  a{
    text-decoration: none;
    color: #666
  }
  img{
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
  }
  .c900{
    width: 900px;
    margin-inline: auto;
  }
  .flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .grid2{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto;
  }
  .grid3{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto;
  }
  .grid4{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto;
  }
  header{
    background-color: #0f9ae0;
    background-size: cover;
    position: sticky;
    top: 0px;
    z-index: 1;
    height: 60px;
  }
  header h1{
    margin: 10px;
  }
  header span>a{
    margin-left: 20px;
    color: #fff;
  }
  main{
    background-color: #eee;
    min-height: calc(100% - 100px);
    padding: 20px;
  }
</style>